<template>
	<view>
		<template v-if="showBigImg">
			<view class="bigImg" @tap='hideBigImg()'>
				<image :src="showImg" style="height: 490rpx;width: 490rpx;" mode=""></image>
			</view>
		</template>
		<view class="jui_flex jui_bg_fff recharge_tab">
			<view class="jui_flex1 jui_text_center jui_pad_2432" v-for="(item, index) in tabList" :key="index">
				<text class="jui_fs32 jui_fc_333 recharge_tab_text jui_pad_8" :class="{'active': tabIndex == index}"
					@tap="toggle(index)">{{item.value}}</text>
			</view>
		</view>
		<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff jui_bor_rad_15">
			<view class="jui_mar_t14">充值金额</view>
			<view class="jui_flex  jui_flex_items_center" style="margin-top: 40rpx;">
				<text>￥</text>
				<input type="text" value="" placeholder="请输入充值金额" v-model="subInfo.money"/>
			</view>
		</view>
		<template v-if="tabIndex == 0">
			<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff jui_bor_rad_15">
				<view class="jui_mar_t14">充值方式</view>
				<view v-if="IfWx">
					<radio-group style="width: 100%;padding: 30rpx 0;" @change="radioChange">
						<label class="jui_flex jui_flex_items_center">
							<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/wx_pay.png" mode="aspectFit"></image>
							<text class="jui_flex1 jui_mar_l16">微信支付</text>
							<radio value="0" style="transform: scale(0.7);" :checked="currentVal == '0' ? true : false"/>
						</label>
					</radio-group>
				</view>
				<view v-if="Ifapp">
					<radio-group style="width: 100%;padding: 30rpx 0;" @change="radioChange">
						<!-- <label class="jui_flex jui_flex_items_center">
							<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/wx_pay.png" mode="aspectFit"></image>
							<text class="jui_flex1 jui_mar_l16">微信支付</text>
							<radio value="0" style="transform: scale(0.7);" :checked="currentVal == '0' ? true : false"/>
						</label> -->
						<label class="jui_flex jui_flex_items_center" style="margin-top: 20rpx;" >
							<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/alipay.png" mode="aspectFit"></image>
							<text class="jui_flex1 jui_mar_l16">支付宝支付</text>
							<radio value="1" style="transform: scale(0.7);" :checked="currentVal == '0' ? true : false" />
						</label>
					</radio-group>
				</view>
				<view v-if="IfH5">
					<radio-group style="width: 100%;padding: 30rpx 0;" @change="radioChange">
						<label class="jui_flex jui_flex_items_center">
							<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/wx_pay.png" mode="aspectFit"></image>
							<text class="jui_flex1 jui_mar_l16">微信支付</text>
							<radio value="0" style="transform: scale(0.7);" :checked="currentVal == '0' ? true : false"/>
						</label>
						<label class="jui_flex jui_flex_items_center" style="margin-top: 20rpx;" >
							<image style="width: 40rpx; height: 40rpx;" src="../../../static/imgs/alipay.png" mode="aspectFit"></image>
							<text class="jui_flex1 jui_mar_l16">支付宝支付</text>
							<radio value="1" style="transform: scale(0.7);" :checked="currentVal == '1' ? true : false" />
						</label>
					</radio-group>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff" style="border-radius: 15rpx;">
				<view class="jui_flex jui_flex_justify_between jui_flex_items_center"
					style="padding: 20rpx 0;border-bottom: 1px solid #f5f5f5;">
					<view class="">转款方式</view>
					<view class="jui_flex" style="width:150rpx;border: none;">
						<xfl-select style="border: hidden;flex: 1;padding-right: 0;" class="item-input flex-sub"
							:list="list" :clearable="false" :showItemNum="5" :isCanInput="false" :focusShowList="true"
							:placeholder="'placeholder'" :initValue="'请选择'" @change="change"
							:selectHideType="'hideAll'"></xfl-select>
					</view>
				</view>
				<template v-if="current == 0">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">姓名</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payee}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;" @tap="$tool.h5Copy(info.payee)">
						</image>
					</view>
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">转账账号</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payeecode}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;" @tap="$tool.h5Copy(info.payeecode)">
						</image>
					</view>
				</template>
				<template v-if="current == 1">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">姓名</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payee}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;"
							@tap="$tool.h5Copy(info.payee)"></image>
					</view>
				</template>
				<template v-if="current == 2">
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">姓名</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payee}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;" @tap="$tool.h5Copy(info.payee)">
						</image>
					</view>
					<view class="jui_flex jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">转账账号</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payeecode}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;" @tap="$tool.h5Copy(info.payeecode)">
						</image>
					</view>
					<view class="jui_flex jui_flex_justify_between jui_flex_items_center" style="padding: 20rpx 0;">
						<view class="">开户行地址</view>
						<view class="jui_fc_999 jui_text_right jui_flex1 jui_ellipsis_1">{{info.payeephone}}</view>
						<image src="../../../static/imgs/user/copy.png" mode=""
							style="height: 24rpx;width: 24rpx;margin-left: 10rpx;" @tap="$tool.h5Copy(info.payeephone)">
						</image>
					</view>
				</template>
				<!-- <template v-if="current == 3">
					<view class="bor" style="padding: 30rpx 0;">
						<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_fs30">
							<view class="">
								钱包地址
							</view>
							<input type="text" value="" placeholder="钱包地址" class="ipt" v-model="subInfo.walleturl"/>
						</view>
					</view>
				</template> -->
			</view>
			<template v-if="current != -1 && paytype != 'bank'">
				<view class="jui_h20"></view>
				<view class="jui_mar_2432 jui_flex ">
					<view v-if="showImg">
						<view class="jui_mar_b20">收款码</view>
						<view v-if="Ifapp">
							<image :src="showImg" style="height: 190rpx;width: 190rpx;" mode=""></image>
							<view class="qrcode" @tap="$tool.savePic(showImg)">保存二维码</view>
						</view>
						<view v-else>
							<image :src="showImg" @tap="showBig()" style="height: 190rpx;width: 190rpx;" mode="">
							</image>
							<view class="qrcode" @tap="$tool.savePic(showImg)">保存二维码</view>
						</view>
					</view>
					<view class="" style="margin-left: 50rpx;">
						<view class="jui_mar_b20">上传交易截图</view>
						<view class="jui_bg_fff jui_flex jui_flex_items_center jui_flex_justify_center jui_bor_rad_10"
							style="height: 180rpx;width: 180rpx;" @tap="upload()">
							<image src="/static/imgs/user/xiaojia.png" mode="" style="height: 42rpx;width: 42rpx;"
								v-if="!img"></image>
							<image :src="img" mode="aspectFit" style="height: 100%;width:100%;" v-else></image>
						</view>
					</view>
				</view>
			</template>
		</template>
		<view class="txcontent">
			<view style="padding: 30rpx 0;" v-html="txcontent"></view>
		</view>
		<view class="jui_public_btn jui_bg_fff jui_public_btn_radius"
			style="width:100%;position: fixed;bottom: 0;left: 0;">
			<button @tap="submit()">确认</button>
		</view>
	</view>
</template>
<script>
	import global from '@/api/global.js'
	export default {
		data() {
			return {
				tabList: [{
						value: '线上充值',
						type: 1
					},
					{
						value: '线下充值',
						type: 0
					},
					{
						value: '充值记录',
						type: 2
					},
				],
				tabIndex: 0,
				list: [{
						value: '微信',
						type: 'wx'
					},
					{
						value: '支付宝',
						type: 'zfb'
					},
					{
						value: '银行卡',
						type: 'bank'
					},
					/* {
					 	value: 'BLTZ',
					 	type:'wallet'
				    }, */
				],
				current: 0,
				currentVal: '0',
				txcontent:'',
				img: '',
				showImg: '',
				Ifapp: false,
				IfWx: false,
				IfH5: false,
				showBigImg: false,
				info: {},
				subInfo: {
					type: "",
					money: "",
					img: ""
				},
				paytype: '',
				config: 0
			};
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
				url: 'rechargeLog'
			});
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			this.IfWx = true
			//#endif
			//#ifdef APP-PLUS
			this.Ifapp = true
			//#endif
			//#ifdef H5
			this.IfH5 = true
			//#endif
			this.init('bank');
		},
		methods: {
			radioChange(res) {
				this.current = res.detail.value;
				this.currentVal = res.detail.value;
			},
			getset() {
				this.$api.getConfigTopUp().then(res => {
					if (res.code==1) {
						this.config = res.data.config;
					}
				});
			},
			init(type) {
				const _token = uni.getStorageSync('token');
				this.paytype = type
				this.$api.getTopUpInfo({
					type: type
				}).then(res => {
					if (res.ok&&res.data) {
						this.info = res.data;
						if (this.current == 0) {
							this.showImg = res.data.pathurl;
						} else if (this.current == 1) {
							this.showImg = res.data.pathurl;
						}
					}
				});
				let params = {
					type:type,
					_token: _token
				}
				this.$api.paymoney(params).then(res=>{
					if(res.ok&&res.data&&res.data.czcontent){
						this.txcontent = res.data.czcontent
					}
				})
			},
			showBig() {
				this.showBigImg = true
			},
			hideBigImg() {
				this.showBigImg = false
			},
			toggle(index) {
				this.tabIndex = index;
				if(this.tabIndex==2){
					//充值记录
					uni.navigateTo({
						url: 'rechargeLog'
					});
				}
			},
			change(e) {
				this.current = e.index;
				this.init(e.orignItem.type);
			},
			upload() {
				this.$tool.upload('single', 2, '/rest/busi/api/upload').then(res => {
					this.img = res.showImg;
					this.subInfo.img = res.data;
				})
			},
			alipayPayment(userId,money,token,$api) {
				uni.showToast({
					title: '小程序暂不支持支付宝支付',
					icon: 'none'
				})
			},
			wxPayment(userId,money,token,$api) {
				uni.getProvider({ //获取支付类型
					service: 'payment',
					success(res) {
						if (~res.provider.indexOf('wxpay')){
							uni.showLoading({
								title: '正在调微信支付，请稍等...'
							})
							uni.login({
								provider: 'weixin',
								success: res => {
									console.log(res.code)
									$api.wxopenid({_token: token,code: res.code}).then(r => {
										if(r.ok&&r.data){
										  console.log(r.data)
										  let openId = r.data.openId;
										  let wxpay = {
											_token: token,
											userId: userId,
											paymoney: money,
											openId: openId
										  }
										  $api.wxPay(wxpay).then(r => {
											if(r.ok&&r.data){
												uni.requestPayment({
													provider: 'wxpay',
													timeStamp: r.data.timeStamp,
													nonceStr: r.data.nonceStr,
													package: r.data.package,
													signType: r.data.signType,
													paySign: r.data.paySign,
													success: (res) => {
														let info = {
															_token: token,
															userId: userId,
															orderId: r.data.orderId,
															paymoney: r.data.paymoney,
															issuccess: true
														}
														uni.request({
															url: global.baseUrl + "/rest/busi/wxpay/order",
															method: 'POST',
															header: {
																'Content-Type': 'application/x-www-form-urlencoded',
															},
															data: info,
															success: (res) => {
																uni.showToast({
																	title: '支付成功',
																	icon: 'none'
																})
																uni.navigateTo({
																	url: `/pages/user/wallet/rechargeLog`
																})
															}
														})
													},
													fail: (err) => {
														let info = {
															_token: token,
															userId: userId,
															orderId: r.data.orderId,
															paymoney: r.data.paymoney,
															issuccess: false
														}
														uni.request({
															url: global.baseUrl + "/rest/busi/wxpay/order",
															method: 'POST',
															header: {
																'Content-Type': 'application/x-www-form-urlencoded',
															},
															data: info,
															success: (res) => {
																uni.showToast({
																	title: '支付失败，请重新支付',
																	icon: 'none'
																})
															}
														})
													}
												})
											}else{
												uni.hideLoading();
												uni.showToast({
													title: r.msg,
													icon: 'none'
												})
											}
										  })
										}else{
											uni.hideLoading();
											uni.showToast({
												title: '未开通微信支付，请选择其他方式支付',
												icon: 'none'
											})
										}
									})
								},
								fail: err => {
									uni.hideLoading();
									uni.showToast({
										title: '微信支付权限认证失败，请重新发起支付',
										icon: 'none'
									})
								}
							})
						}else{
							uni.hideLoading();
							uni.showToast({
								title: '微信支付权限未设置，请选择其他支付方式',
								icon: 'none'
							})
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '支付失败，请检查微信支付权限',
							icon: 'none'
						})
					}
				})
			},
			alipayAppPayment(userId,money,token,$api) {
				uni.showToast({
					title: '线上支付开发中...',
					icon: 'none'
				})
				uni.getProvider({ //获取可用的支付环境
					service: 'payment',
					success: res => {
						//先判断用户是否有支付宝支付环境
						if (~res.provider.indexOf('alipay')){
							uni.showLoading({
								title: '正在调支付宝支付，请稍等...'
							})
							let pay = {
								_token: token,
								userId: userId,
								paymoney: money
							}
							$api.alipayPay(pay).then(r => {
								if (r.ok&&r.data&&r.data.orderStr) {
									var info = r.data ? r.data.orderStr : '';
									uni.requestPayment({
										provider: 'alipay',
										orderInfo: info,
										success: function(res) {
											let info = {
												_token: token,
												userId: userId,
												orderId: r.data.orderId,
												paymoney: r.data.paymoney,
												issuccess: true
											}
											uni.request({
												url: global.baseUrl + "/rest/busi/alipay/order",
												method: 'POST',
												header: {
													'Content-Type': 'application/x-www-form-urlencoded',
												},
												data: info,
												success: (res) => {
													uni.showToast({
														title: '支付成功',
														icon: 'none'
													})
													uni.navigateTo({
														url: `/pages/user/wallet/rechargeLog`
													})
												}
											})
										},
										fail: function(err) {
											let info = {
												_token: token,
												userId: userId,
												orderId: r.data.orderId,
												paymoney: r.data.paymoney,
												issuccess: false
											}
											uni.request({
												url: global.baseUrl + "/rest/busi/alipay/order",
												method: 'POST',
												header: {
													'Content-Type': 'application/x-www-form-urlencoded',
												},
												data: info,
												success: (res) => {
													uni.showToast({
														title: '支付失败',
														icon: 'none'
													})
												}
											})
										}
									});
								} else {
									uni.hideLoading();
									uni.showToast({
										title: r.msg,
										icon: 'none'
									})
								}
							});
						} else {
							uni.showToast({
								title: '获取支付宝通道失败，请检查您的支付宝是否正常启用',
								icon: 'none'
							})
						}
					}
				})
			},
			wxAppPayment(userId,money,token,$api) {
				uni.getProvider({ //获取支付类型
					service: 'payment',
					success(res) {
						if (~res.provider.indexOf('wxpay')){
							uni.showLoading({
								title: '正在调微信支付，请稍等...'
							})
							uni.login({
								provider: 'weixin',
								success: res => {
									$api.wxopenid({_token: token}).then(r => {
										if(r.ok&&r.data){
											console.log(r.data)
											uni.request({
												url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + r.data.appId + '&secret=' + r.data.secret + '&js_code=' + res.code + '&grant_type=authorization_code',
												data: {},
												header: {
												  'content-type': 'json'
												},
												success: function (res) {
												  let openid = res.data.openid;
												  console.log("微信验证成功："+openid)
												  let wxpay = {
													_token: token,
													userId: userId,
													paymoney: money,
													openId: openid
												  }
												  $api.wxPay(wxpay).then(r => {
													if(r.ok&&r.data){
														uni.requestPayment({
															provider: 'wxpay',
															timeStamp: r.data.timeStamp,
															nonceStr: r.data.nonceStr,
															package: r.data.package,
															signType: r.data.signType,
															paySign: r.data.paySign,
															success: (res) => {
																let info = {
																	_token: token,
																	userId: userId,
																	orderId: r.data.orderId,
																	paymoney: r.data.paymoney
																}
																uni.request({
																	url: global.baseUrl + "/rest/busi/wxpay/order",
																	method: 'POST',
																	header: {
																		'Content-Type': 'application/x-www-form-urlencoded',
																	},
																	data: info,
																	success: (res) => {
																		uni.showToast({
																			title: '支付成功',
																			icon: 'none'
																		})
																		uni.navigateTo({
																			url: `/pages/user/wallet/rechargeLog`
																		})
																	},
																	fail: (err) => {
																		uni.showToast({
																			title: '支付失败，请重新支付',
																			icon: 'none'
																		})
																	}
																})
															},
															fail: (err) => {
																uni.showToast({
																	title: '支付失败，请重新支付',
																	icon: 'none'
																})
															}
														})
													}else{
														uni.hideLoading();
														uni.showToast({
															title: r.msg,
															icon: 'none'
														})
													}
												  })
												}
											})
										}else{
											uni.hideLoading();
											uni.showToast({
												title: '未开通微信支付，请选择其他方式支付',
												icon: 'none'
											})
										}
									})
								},
								fail: err => {
									uni.hideLoading();
									uni.showToast({
										title: '微信支付权限认证失败，请重新发起支付',
										icon: 'none'
									})
								}
							})
						}else{
							uni.hideLoading();
							uni.showToast({
								title: '微信支付权限未设置，请选择其他支付方式',
								icon: 'none'
							})
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '支付失败，请检查微信支付权限',
							icon: 'none'
						})
					}
				})
			},
			submit() {
				let userId = uni.getStorageSync('uid');
				let _token = uni.getStorageSync('token');
				if (!this.subInfo.money) {
					return this.$msg("请输入充值金额")
				}
				const paytype = this.list[this.current].type;
				if (this.tabIndex==1) {
					//线下充值
					this.subInfo.type = paytype;
					if (this.subInfo.type == "" || this.subInfo.type == null || this.subInfo.type == undefined) {
						return this.$msg("请选择充值方式")
					}
					if (!this.subInfo.img) {
						return this.$msg("请上传交易截图")
					}
					let params = {
						userId: userId,
						_token: _token,
						paytype: this.paytype,
						paymoney: this.subInfo.money,
						payee: this.info.payee,
						payeecode: this.info.payeecode,
						payeephone: this.info.payeephone,
						walleturl: this.subInfo.walleturl,
						path: this.subInfo.img,
					}
					this.$api.addTopUp(params).then(res => {
						if (res.ok) {
							this.$msg(res.msg);
							setTimeout(() => {
								uni.navigateTo({
									url: `/pages/user/wallet/rechargeLog`
								})
							})
						} else {
							this.$msg(res.msg);
						}
					});
				} else {
					//线上充值
					//#ifdef MP-WEIXIN
						// 线上支付(微信支付与支付宝支付)
						if(paytype&&paytype=='zfb'){
							this.alipayPayment(userId,this.subInfo.money,_token,this.$api);
						}else{
							this.wxPayment(userId,this.subInfo.money,_token,this.$api);
						}
					//#endif
					//#ifdef APP-PLUS
						// 线上支付(微信支付与支付宝支付)
						if(paytype&&paytype=='zfb'){
							this.alipayAppPayment(userId,this.subInfo.money,_token,this.$api);
						}else{
							//this.wxAppPayment(userId,this.subInfo.money,_token,this.$api);
							this.alipayAppPayment(userId,this.subInfo.money,_token,this.$api);
						}
					//#endif
					//#ifdef APP-PLUS-NVUE
						// 线上支付(微信支付与支付宝支付)
						if(paytype&&paytype=='zfb'){
							this.alipayAppPayment(userId,this.subInfo.money,_token,this.$api);
						}else{
							//this.wxAppPayment(userId,this.subInfo.money,_token,this.$api);
							this.alipayAppPayment(userId,this.subInfo.money,_token,this.$api);
						}
					//#endif
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.txcontent{
		padding: 70rpx;
	}
	.show-box.data-v-4690b4e6{
	    border: none !important;
	}
	.ipt {
		width: 60%;
		text-align: right;
		font-size: 30rpx;
	}
	.bigImg {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		z-index: 999;
		background: #cccccca8;
	}
	.qrcode {
		// margin-top: 40rpx;
		margin-top: 5rpx;
		width: 210rpx;
		height: 64rpx;
		border-radius: 8px;
		font-weight: 400;
		color: #1876ff;
		line-height: 64rpx;
		text-align: center;
		background-color: rgba(24, 118, 255, 0.1);
	}
	.recharge_tab {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 9;
		.recharge_tab_text {
			position: relative;
		}
		.recharge_tab_text::after {
			content: '';
			width: 40%;
			height: 3px;
			background-color: #fff;
			position: absolute;
			bottom: 0;
			left: 30%;
			z-index: 1;
		}
		.recharge_tab_text.active::after {
			content: '';
			width: 40%;
			height: 3px;
			background-color: $zhuse;
			border-radius: 2px;
			position: absolute;
			bottom: 0;
			left: 30%;
			z-index: 1;
		}
	}
</style>
